<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>品类管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <link rel="stylesheet" href="lib/layui/css/layui.css">
    <script src="js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <script src="lib/layui/layui.js"></script>
    <script src="lib/layui/layui.all.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body class="layui-anim layui-anim-up">
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">演示</a>
        <a>
          <cite>导航元素</cite></a>
      </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>

<!--搜索-->
<div class="demoTable">
    搜索ID：
    <div class="layui-inline">
        <input class="layui-input" name="id" id="demoReload" autocomplete="off">
    </div>
    <button class="layui-btn layui-icon" data-type="reload">&#xe615;搜索</button>

</div>

<table class="layui-hide" id="LAY_table_user" lay-filter="test"></table>


<!--头工具条-->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
        <button class="layui-btn layui-btn-sm layui-icon" lay-event="add" lay-filter="addLayer">&#xe654;</button>
    </div>
</script>

<!--添加弹窗表单-->
<div style="display: none;" id="addF">
    <form action="" class="layui-form" lay-filter="dataFrm" id="dataFrm">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">ID</label>
                <div class="layui-input-inline">
                    <input type="text" name="parent_id" lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="categoryName" lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <div class="layui-input-block">
                <button type="button" class="layui-btn layui-icon layui-icon-release" lay-filter="add" lay-submit="">提交</button>
                <button type="reset" class="layui-btn layui-icon layui-icon-refresh">重置</button>
            </div>
        </div>
    </form>
</div>


<!--修改弹窗表单-->
<div style="display: none;" id="changeX">
    <form action="" class="layui-form" lay-filter="dataFrm" >
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">品类ID</label>
                <div class="layui-input-inline">
                    <input type="text" name="category_id" lay-verify="required" autocomplete="off" class="layui-input" id="category_id">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">品类名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="category_name" lay-verify="required" autocomplete="off" class="layui-input" id="category_name" value="">
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <div class="layui-input-block">
                <button type="button" class="layui-btn layui-icon layui-icon-release" lay-filter="change" lay-submit="">提交</button>
                <button type="reset" class="layui-btn layui-icon layui-icon-refresh">重置</button>
            </div>
        </div>
    </form>
</div>


<!--工具行-->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
</script>


<!--<script src="lib/layui/layui.js" charset="utf-8"></script>-->
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use(['table','form','layer'], function(){
        var table = layui.table
            ,form=layui.form
            ,layer=layui.layer
            ,$=layui.jquery;

        let curl = 'http://localhost:8080'
        //方法级渲染
        table.render({
            elem: '#LAY_table_user'
            ,url: curl+'/shopping/manage/category?type=get_category'
            //,url:'data.json'
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: ['filter', 'exports', 'print']
            ,cols: [[
                 {type: 'checkbox', fixed: 'left'}
                ,{field:'id',  title: '编号', sort: true,align:'center'}
                ,{field:'parent_id', title: '父类编号',align:'center'}
                ,{field:'name',  title: '名称',align:'center'}
                ,{field:'create_time', title: '创建时间',align:'center'}
                ,{field:'right', title: '操作',toolbar:"#barDemo",align:'center'}
            ]]
            ,id: 'testReload'
            ,page: true
            ,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据
                console.log(res)
                return {
                    //"code": res.status, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    //"count": res.total, //解析数据长度
                    //"data": res.rows.item //解析数据列表
                    "code": res.status, //解析接口状态
                    //"count": res.data.length, //解析数据长度
                    "data": res.data //解析数据列表
                };
            }
        });

        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            var data = obj.data
            switch(obj.event){
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：'+ data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选');
                    break;
                case 'add':
                    openAdd();
                    break;
            };
        });


        let a ='/shopping/manage/category?type=add_category'
        let b ='/shopping/manage/category?type=set_category_name'

        //打开弹出框
        function openAdd(){
            layer.open({
                type:1,
                title:'增加节点',
                area:['400px','250px'],
                content:$('#addF'),
            })
        }

        form.on('submit(add)',function(data){
            console.log(JSON.stringify(data.field))
            let  aa = JSON.stringify(data.field)
            var oj = JSON.parse(aa)
            let parent_id = oj.parent_id
            let categoryName = oj.categoryName
            console.log(parent_id,categoryName)
            $.ajax({
                type:'POST',
                url:'http://localhost:8080'+a,
                dataType:'json',
                xhrFields: { withCredentials: true },
                //data:JSON.stringify(data.field),
                data:{'parent_id':parent_id,'categoryName':categoryName },
                success:function (res) {
                    if(res.status === 0){
                        layer.msg("添加成功！")
                    }else {
                        console.log(res)
                        layer.msg("添加失败！")
                    }
                },
                error:function () {
                    console.log("错误")
                }
            })
            return false;
        }),


        //监听工具行
        table.on('tool(test)',function (obj) {
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event;
            let cd =data.name
            console.log(cd)
            if(layEvent === 'edit'){
                updateChange();
            }
        });

        function updateChange(data){
            layer.open({
                        type:1,
                        title:'修改品类名称',
                        area:['400px','250px'],
                        content:$('#changeX'),
                    })
        }

        form.on('submit(change)',function(data){
            //alert(JSON.stringify(data.field))
            let  aa = JSON.stringify(data.field)
            var oj = JSON.parse(aa)
            let category_id = oj.category_id
            let category_name = oj.category_name

            console.log(category_id,category_name)
            $.ajax({
                type:'POST',
                url:'http://localhost:8080'+b,
                dataType:'json',
                xhrFields: { withCredentials: true },
                //data:JSON.stringify(data.field),
                data:{'category_id':category_id,'category_name':category_name},
                success:function (res) {
                    if(res.status === 0){
                        layer.msg("更新品类名字成功！")
                        active.reload()
                    }else {
                        layer.msg("更新品类名字失败！")
                    }
                }
            })
            return false;
        })




        var $ = layui.$, active = {
            reload: function(){
                var demoReload = $('#demoReload');

                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {

                        category_id: demoReload.val()
                    }
                }, 'data');
            }
        };

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>



</body>
</html>